<% var keyPrefix = angularAppName + '.' + entityTranslationKey; %>
<div *ngIf="<%= entityInstance %>">
    <h2><span jhiTranslate="<%= keyPrefix %>.detail.title"><%= entityClassHumanized %></span> {{<%= entityInstance %>.id}}</h2>
    <hr>
    <jhi-alert-error></jhi-alert-error>
    <dl class="row">
        <%_ for (idx in fields) {
        var fieldName = fields[idx].fieldName;
        var fieldType = fields[idx].fieldType;
        var fieldTypeBlobContent = fields[idx].fieldTypeBlobContent; _%>
        <dt><span jhiTranslate="<%= keyPrefix %>.<%= fieldName %>"><%= fields[idx].fieldNameHumanized %></span></dt>
        <dd>
            <%_ if (fields[idx].fieldIsEnum) { _%>
            <span jhiTranslate="{{'<%= angularAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %>}}">{{<%= entityInstance %>.<%= fieldName %>}}</span>
            <%_ } else if ((fieldType === 'byte[]' || fieldType === 'ByteBuffer') && fieldTypeBlobContent == 'image') { _%>
            <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
                <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
                    <img [src]="'data:' + <%=entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%=entityInstance %> image"/>
                </a>
                {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
            </div>
            <%_ } else if (fieldType == 'ZonedDateTime') { _%>
            <span>{{<%=entityInstance %>.<%= fieldName %> | date:'medium'}}</span>
            <%_ } else if (fieldType == 'LocalDate') { _%>
            <span>{{<%=entityInstance %>.<%= fieldName %> | date:'mediumDate'}}</span>
            <%_ } else if ((fieldType === 'byte[]' || fieldType === 'ByteBuffer') && fieldTypeBlobContent == 'any') { _%>
            <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
                <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" jhiTranslate="entity.action.open">open</a>
                {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
            </div>
            <%_ } else { _%>
            <span>{{<%= entityInstance %>.<%= fieldName %>}}</span>
            <%_ } _%>
        </dd>
        <%_ } _%>
        <%_ for (idx in relationships) {
        var relationshipType = relationships[idx].relationshipType;
        var ownerSide = relationships[idx].ownerSide;
        var relationshipName = relationships[idx].relationshipName;
        var relationshipFieldName = relationships[idx].relationshipFieldName;
        var relationshipFieldNamePlural = relationships[idx].relationshipFieldNamePlural;
        var relationshipNameHumanized = relationships[idx].relationshipNameHumanized;
        var otherEntityName = relationships[idx].otherEntityName;
        var otherEntityStateName = relationships[idx].otherEntityStateName;
        var otherEntityField = relationships[idx].otherEntityField;
        var otherEntityFieldCapitalized = relationships[idx].otherEntityFieldCapitalized;
        if (relationshipType == 'many-to-one'
        || (relationshipType == 'one-to-one' && ownerSide == true)
        || (relationshipType == 'many-to-many' && ownerSide == true)) { _%>
        <dt><span jhiTranslate="<%= keyPrefix %>.<%= relationshipName %>"><%= relationshipNameHumanized %></span></dt>
        <dd>
            <%_ if (otherEntityName == 'user') { _%>
            <%_ if (relationshipType == 'many-to-many') { _%>
            <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
                {{<%= relationshipFieldName %>.<%= otherEntityField %>}}{{last ? '' : ', '}}
            </span>
            <%_ } else { _%>
            <%_ if (dto == 'no') { _%>
            {{<%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %>}}
            <%_ } else { _%>
            {{<%= entityInstance + "." + relationshipFieldName + otherEntityFieldCapitalized %>}}
            <%_ } _%>
            <%_ } _%>
            <%_ } else { _%>
            <%_ if (relationshipType == 'many-to-many') { _%>
            <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
                <a [routerLink]="['/<%= otherEntityStateName %>', <%= relationshipFieldName %>?.id ]">{{<%= relationshipFieldName %>.<%= otherEntityField %>}}</a>{{last ? '' : ', '}}
            </span>
            <%_ } else { _%>
            <%_ if (dto == 'no') { _%>
            <div *ngIf="<%= entityInstance + '.' + relationshipFieldName %>">
                <a [routerLink]="['<%= otherEntityStateName %>', <%= entityInstance + '.' + relationshipFieldName + '?.id' %>]">{{<%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %>}}</a>
            </div>
            <%_ } else { _%>
            <div *ngIf="<%= entityInstance + '.' + relationshipFieldName + "Id" %>">
                <a [routerLink]="['<%= otherEntityStateName %>', <%= entityInstance + '.' + relationshipFieldName + "Id" %>]">{{<%= entityInstance + "." + relationshipFieldName + otherEntityFieldCapitalized %>}}</a>
            </div>
            <%_ } _%>
            <%_ } _%>
            <%_ } _%>
        </dd>
        <%_ } _%>
        <%_ } _%>
    </dl>

    <button type="submit"
            (click)="previousState()"
            class="btn btn-info">
        <span class="fa fa-arrow-left"></span>&nbsp;<span jhiTranslate="entity.action.back"> Back</span>
    </button>

    <button type="button"
            [routerLink]="['/', { outlets: { popup: '<%= entityUrl %>/'+ <%= entityInstance %>.id + '/edit'} }]"
            replaceUrl="true"
            class="btn btn-primary">
        <span class="fa fa-pencil"></span>&nbsp;<span jhiTranslate="entity.action.edit"> Edit</span>
    </button>
</div>
